<template>
  <div class="c-p c-fs24" :class="item.status == -1 ? 'c-opacity60' : ''">
    <collapse-com v-if="item.detail || item.content" :key="'collapse_' + item.questionDetailId" :limitHeight="80">
      <template v-slot:content="{isShowAll}">
        <div class="c-wb-ba c-ws-pw c-fc-xblack c-fw400 lh44" :class="isShowAll ? '' : 'c-text-ellipsis3'"><span v-if="isShowIcon" class="iconfont c-fs24 theme-fc c-mr4">&#xe87e;</span>{{item.detail || item.content}}</div>
      </template>
      <template v-slot:showAllBotton="{isShowAll}">
        <div class="theme-fc c-fs22">点击{{isShowAll ? '收起' : '展开'}}</div>
      </template>
    </collapse-com>
    <!-- 问题视频、图片, 有视频图片显示2张，无视频显示4张 -->
    <div class="c-flex-row c-mt20" v-if="item.videoMp4 || (item.imgUrl && item.imgUrl.length)">
      <div v-if="item.videoMp4" class="c-p c-ww180 c-hh120 c-fc-white c-flex-row c-flex-center c-p c-mr20" @click="clickShowVideo(0, item.questionStatus, item.videoMp4)">
        <i class="iconfont c-pa c-fs40" v-if="item.videoLogo != ''">&#xe869;</i>
        <img class="c-w100 c-h c-object-fit-cover c-br10" :src="$addXossFilter(item.videoLogo, 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg1.png')" alt="" />
      </div>
      <div v-if="imgIndex < imgNum" v-for="(imgItem, imgIndex) in item.imgUrl" :key="imgIndex" :class="imgIndex > 0 ? 'c-ml20' : ''" class="c-p c-ww120 c-hh120 c-br10 c-flex-shrink0" @click="clickPreviewImage(imgItem,item.imgUrl, item.questionStatus)">
        <img class="c-ww120 c-hh120 c-h c-object-fit-cover img-pe-none c-br10" :src="$addXossFilter(imgItem)" alt="" />
        <div v-if="(imgIndex > showNumLogo && item.imgUrl.length - imgNum !=0 )" class="c-pa c-p-l0 c-p-t0 c-ww120 c-hh120 c-br10 c-bg-black-50 c-flex-row c-flex-center c-fs28 c-fc-white">+{{ item.imgUrl.length - imgNum}}</div>
      </div>
    </div>
    <!-- 问题音频 -->
    <div v-if="item.audioUrl" :style="'width:' + (item.recordTime * 1.5 + 150) + 'px;'" class="c-mt20 c-maxw440 c-hh60 c-ph24 c-br10 c-fc-white c-bg-1BBF76 c-flex-row c-aligni-center" @click="clickPlayAudio(item.audioUrl, item.questionStatus)">
      <div v-if="playAduioSrc != item.audioUrl" class="c-flex-row c-aligni-center c-mr6">
        <span v-show="item.recordTime > 20" class="pillar-pause"></span>
        <span class="pillar-pause"></span>
        <span class="pillar-pause"></span>
        <span class="pillar-pause"></span>
        <span class="pillar-pause"></span>
        <span class="pillar-pause"></span>
        <span v-show="item.recordTime > 10" class="pillar-pause"></span>
        <span v-show="item.recordTime > 20" class="pillar-pause"></span>
      </div>
      <div v-else class="c-flex-row c-aligni-center c-mr6">
        <span v-show="item.recordTime > 20" class="pillar"></span>
        <span class="pillar"></span>
        <span class="pillar"></span>
        <span class="pillar"></span>
        <span class="pillar"></span>
        <span class="pillar"></span>
        <span v-show="item.recordTime > 10" class="pillar"></span>
        <span v-show="item.recordTime > 20" class="pillar"></span>
      </div>
      <span class="c-flex-grow1 c-w0 c-pl10">点击播放</span>
      <span>{{item.recordTime}}"</span>
    </div>
  </div>
</template>

<script>
import collapseCom from "@/components/templates/common/collapseCom.vue";
export default {
  name: "qaContentItem",
  components: {
    collapseCom
  },
  props: {
    item: {
      type: Object,
      default: () => {}
    },
    playAduioSrc: {
      type: String,
      default: ''
    },
    // 是否显示问的图标
    isShowIcon: {
      type: Boolean,
      default: true
    },
    // 默认是4，有视频2
    showNum: {
      type:Number,
      default: 4
    }
  },
  data() {
    return {
    };
  },
  computed: {
    imgNum() {
      let num = 0;
      // item.videoMp4 ? 2 :4
      if (this.item.videoMp4) {
        num = this.showNum - 2;
      } else {
        num = this.showNum
      }
      return num
    },
    showNumLogo() {
      // item.videoMp4 ? 0 : 2
      let num = 0;
      if (this.item.videoMp4) {
        num = this.showNum - 4 ;
      } else {
        num = this.showNum - 2
      }
      return num
    }
  },
  methods: {
    clickPreviewImage(imgUrl, itemImgList, questionStatus) {
      this.$emit('clickPreviewImage', imgUrl, itemImgList, questionStatus);
    },
    clickPlayAudio(audioUrl, questionStatus) {
      this.$emit('clickPlayAudio', audioUrl, questionStatus);
    },
    clickShowVideo(isReply, questionStatus, videoMp4) {
      this.$emit('clickShowVideo', isReply, questionStatus, videoMp4);
    }
  }
};
</script>

<style lang="scss" scoped>
@function pxToRem($px) {
  //$rpx为需要转换的字号
  @return $px/40 + rem;
}
@-webkit-keyframes pillarDance{
  0%{height:pxToRem(8);}
  50%{height:pxToRem(24);}
  100%{height:pxToRem(8);}
}
.pillar{
  width: 0.1rem;
  margin: 0 0.1rem;
  height: pxToRem(8);
  background: #fff;
  border-radius: 0.2rem;
  animation: pillarDance 2s infinite ease;
}
.pillar:first-child{
  animation-delay:0.5s;
}
.pillar:nth-child(2){
  animation-delay:1s;
}
.pillar:nth-child(3){
  animation-delay:1.5s;
}
.pillar:nth-child(4){
  animation-delay:2s;
}
.pillar:nth-child(5){
  animation-delay:0.5s;
}
.pillar:nth-child(6){
  animation-delay:1s;
}
.pillar:nth-child(7){
  animation-delay:1.5s;
}
.pillar:nth-child(8){
  animation-delay:2s;
}

.pillar-pause{
  width: 0.1rem;
  margin: 0 0.1rem;
  height: pxToRem(8);
  background: #fff;
  border-radius: 0.2rem;
}
.pillar-pause:nth-child(2){
  height: pxToRem(12);
}
.pillar-pause:nth-child(3){
  height: pxToRem(16);
}
.pillar-pause:nth-child(4){
  height: pxToRem(24);
}
.pillar-pause:nth-child(5){
  height: pxToRem(24);
}
.pillar-pause:nth-child(6){
  height: pxToRem(16);
}
.pillar-pause:nth-child(7){
  height: pxToRem(12);
}
.pillar-pause:nth-child(8){
  height: pxToRem(8);
}
</style>